<!-- views/inventory/components/ProductTable.vue -->
<template>
  <el-card class="table-card" shadow="never">
    <template #header>
      <div class="table-header">
        <div class="header-left">
          <span>产品列表</span>
          <el-tag type="info">{{ pagination.total }} 条记录</el-tag>
        </div>
        <div class="header-right">
          <el-button-group>
            <el-button :icon="Sort" @click="handleSort('name')">
              按名称排序
            </el-button>
            <el-button :icon="Sort" @click="handleSort('createdAt')">
              按创建时间排序
            </el-button>
          </el-button-group>
          
          <el-button 
            link
            :icon="View" 
            @click="toggleViewMode"
          >
            {{ viewMode === 'table' ? '卡片视图' : '表格视图' }}
          </el-button>
        </div>
      </div>
    </template>

    <!-- 表格视图 -->
    <div v-if="viewMode === 'table'">
      <el-table
        :data="tableData"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
        class="products-table"
        stripe
      >
        <el-table-column type="selection" width="50" />
        
        <!-- 产品基本信息 -->
        <el-table-column prop="basicInfo" label="产品信息" min-width="250" fixed>
          <template #default="{ row }">
            <div class="product-basic-cell">
              <div class="product-name-row">
                <span class="product-name">{{ row.name }}</span>
                <el-tag 
                  :type="getStatusType(row.status)"
                  size="small"
                  class="status-tag"
                >
                  {{ getStatusText(row.status) }}
                </el-tag>
              </div>
              <div class="product-sku">
                SKU: {{ row.sku }}
              </div>
              <div class="product-category">
                <el-tag size="small" type="info">
                  {{ row.category?.name || '未分类' }}
                </el-tag>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <!-- 规格信息 -->
        <el-table-column prop="specification" label="规格" width="180">
          <template #default="{ row }">
            <div class="specification-cell">
              <div class="spec">{{ row.specification }}</div>
              <div class="unit">单位: {{ row.unit }}</div>
            </div>
          </template>
        </el-table-column>
        
        <!-- 库存信息 -->
        <el-table-column prop="stockInfo" label="库存信息" width="150">
          <template #default="{ row }">
            <div class="stock-cell">
              <div class="stock-quantity">
                <span class="label">库存:</span>
                <span 
                  class="value" 
                  :class="{ 'low-stock': row.stock < row.minStock }"
                >
                  {{ row.stock }}
                </span>
              </div>
              <div class="min-stock">
                <span class="label">安全库存:</span>
                <span class="value">{{ row.minStock }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <!-- 价格信息 -->
        <el-table-column prop="priceInfo" label="价格信息" width="150">
          <template #default="{ row }">
            <div class="price-cell">
              <div class="sale-price">
                <span class="label">售价:</span>
                <span class="value">¥{{ formatCurrency(row.salePrice) }}</span>
              </div>
              <div class="cost-price">
                <span class="label">成本:</span>
                <span class="value">¥{{ formatCurrency(row.costPrice) }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <!-- 品牌信息 -->
        <el-table-column prop="brand" label="品牌" width="120">
          <template #default="{ row }">
            <div class="brand-cell">
              {{ row.brand?.name || '无' }}
            </div>
          </template>
        </el-table-column>
        
        <!-- 创建时间 -->
        <el-table-column prop="createdAt" label="创建时间" width="120" sortable>
          <template #default="{ row }">
            {{ formatDate(row.createdAt) }}
          </template>
        </el-table-column>
        
        <!-- 操作列 -->
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button 
                type="primary" 
                link 
                :icon="View" 
                @click.stop="showProductDetail(row)"
              >
                详情
              </el-button>
              
              <el-button 
                type="warning" 
                link 
                :icon="Edit" 
                @click.stop="editProduct(row)"
              >
                编辑
              </el-button>
              
              <el-dropdown 
                @command="(command: string) => handleMoreAction(command, row)"
              >
                <el-button type="info" link :icon="More" />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="clone" :icon="CopyDocument">
                      复制产品
                    </el-dropdown-item>
                    <el-dropdown-item 
                      command="delete" 
                      :icon="Delete"
                      divided
                    >
                      删除产品
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 卡片视图 -->
    <div v-else class="card-view">
      <el-row :gutter="16">
        <el-col 
          v-for="product in tableData" 
          :key="product.id"
          :xs="24" :sm="12" :md="8" :lg="6"
        >
          <el-card 
            class="product-card" 
            shadow="hover"
            @click="showProductDetail(product)"
          >
            <template #header>
              <div class="card-header">
                <span class="product-name">{{ product.name }}</span>
                <el-tag 
                  :type="getStatusType(product.status)"
                  size="small"
                >
                  {{ getStatusText(product.status) }}
                </el-tag>
              </div>
            </template>
            
            <div class="card-content">
              <div class="product-sku">SKU: {{ product.sku }}</div>
              <div class="product-spec">{{ product.specification }}</div>
              <div class="product-category">{{ product.category?.name || '未分类' }}</div>
              <div class="product-brand">品牌: {{ product.brand?.name || '无' }}</div>
              <div class="product-stock">
                库存: 
                <span 
                  :class="{ 'low-stock': product.stock < product.minStock }"
                >
                  {{ product.stock }}
                </span>
              </div>
              <div class="product-price">售价: ¥{{ formatCurrency(product.salePrice) }}</div>
            </div>
            
            <div class="card-actions">
              <el-button 
                type="warning" 
                link 
                :icon="Edit" 
                @click.stop="editProduct(product)"
              >
                编辑
              </el-button>
              <el-button 
                type="primary" 
                link 
                :icon="View" 
                @click.stop="showProductDetail(product)"
              >
                详情
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
// @ts-nocheck
import { defineProps, defineEmits } from 'vue'
import { 
  Sort, View, Edit, More, CopyDocument, Delete 
} from '@element-plus/icons-vue'
import { formatCurrency, formatDate } from '@/utils/formatters'

// 定义产品数据接口
interface Product {
  id: number
  sku: string
  name: string
  specification: string
  unit: string
  categoryId: number | null
  categoryName?: string
  brandId: number | null
  brandName?: string
  description: string
  stock: number
  minStock: number
  salePrice: number
  costPrice: number
  status: string
  createdAt: string
  // 添加关联对象
  category?: {
    id: number
    name: string
  }
  brand?: {
    id: number
    name: string
  }
}

// 定义分页接口
interface Pagination {
  currentPage: number
  pageSize: number
  total: number
}

const props = defineProps<{
  tableData: Product[]
  loading: boolean
  viewMode: 'table' | 'card'
  pagination: Pagination
}>()

const emit = defineEmits<{
  (e: 'selection-change', selection: Product[]): void
  (e: 'row-click', row: Product): void
  (e: 'sort-change', field: string): void
  (e: 'view-mode-toggle'): void
  (e: 'size-change', size: number): void
  (e: 'current-change', page: number): void
  (e: 'show-detail', product: Product): void
  (e: 'edit', product: Product): void
  (e: 'more-action', command: string, product: Product): void
}>()

const handleSelectionChange = (selection: Product[]) => {
  emit('selection-change', selection)
}

const handleRowClick = (row: Product) => {
  emit('row-click', row)
}

const handleSort = (field: string) => {
  emit('sort-change', field)
}

const toggleViewMode = () => {
  emit('view-mode-toggle')
}

const handleSizeChange = (size: number) => {
  emit('size-change', size)
}

const handleCurrentChange = (page: number) => {
  emit('current-change', page)
}

const showProductDetail = (product: Product) => {
  emit('show-detail', product)
}

const editProduct = (product: Product) => {
  emit('edit', product)
}

const handleMoreAction = (command: string, product: Product) => {
  emit('more-action', command, product)
}

// 工具函数
const getStatusType = (status: string) => {
  switch (status) {
    case 'active': return 'success'
    case 'inactive': return 'info'
    case 'outofstock': return 'danger'
    default: return 'info'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'active': return '在售'
    case 'inactive': return '下架'
    case 'outofstock': return '缺货'
    default: return status
  }
}
</script>

<style scoped>
.table-card {
  margin-bottom: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.product-basic-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-name {
  font-weight: 600;
  color: #1f2d3d;
}

.product-sku {
  font-size: 12px;
  color: #606266;
}

.status-tag {
  height: 20px;
  line-height: 18px;
}

.specification-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.unit {
  font-size: 12px;
  color: #606266;
}

.stock-cell, .price-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.label {
  font-size: 12px;
  color: #606266;
}

.value {
  font-weight: 500;
}

.value.low-stock {
  color: #f56c6c;
  font-weight: 600;
}

.brand-cell {
  color: #1f2d3d;
}

.card-view {
  padding: 20px 0;
}

.product-card {
  margin-bottom: 16px;
  cursor: pointer;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: #606266;
}

.card-content .product-sku {
  font-size: 12px;
  color: #909399;
}

.card-content .product-stock .low-stock {
  color: #f56c6c;
  font-weight: 600;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
}
</style>